<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取设置行内样式</title>
</head>
<body>
    <div id="qdxx" style="color:blue;font-size:24px;padding: 100px;width:100px;height:50px;border:2px solid rgb(62, 176, 207);">前端学习</div>
    <script>
        document.write('获取设置行内样式：')
        document.write('<p style="color:red;">获取行内style中的所有样式：<br/>语法：元素.style.cssText;</p>')
        var z = document.getElementById('qdxx');
        document.write(z.style.cssText + '<br>');
        document.write('<p style="color:red;">设置行内style中的所有样式：<br/>语法：元素.style.cssText = "样式设置";</p>')
        z.style.cssText = 'color:red;font-size:30px;font-weight:700px;width:500px;'
        document.write('<p style="color:blue;">获取行内style中的某个样式：<br/>语法：元素.style.样式属性;</p>')
        z.style.color = "blue";
        console.log(document.getElementById('qdxx').style.color);
        console.log(document.getElementById('qdxx').style.width);
        document.write('<p style="color:red;">注：如果样式中有横线"-"，那么就要去掉横线，使用驼峰的写法：<br/>语法：元素.style.fontSize（font-size）;</p>');
        z.style.fontSize = "30px";
        console.log(z.style.fontSize);
    </script>
</body>
</html>